{% load static %}
{% csrf_token %}
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>结果</title>
    <link rel="stylesheet" href="{% static 'tickets/CSS/Initial.css' %}" />
    <link rel="stylesheet" href="{% static 'tickets/CSS/result.css' %}"/>
    <script src="{% static 'tickets/JS/jquery-3.4.1.js' %}"></script>
    <script src="{% static 'tickets/JS/result.js' %}"></script>
</head>

<body>
    <div class="top">
        <div class="top_picture">
            <img src="{% static 'tickets/images/12306.png' %}" style="width: 100%;height:100%;" alt="Logo">
        </div>
        {% if user_get %} 
            <div class="login_block">
                已登录：{{ user_get.user_name }}<br/>
            </div>
            <div style="position: absolute; top: 5%; right: 8%">
                <img src="{% static 'tickets/images/head/' %}{{ user_get.user_head }}"
                style="position: relative; width: 50px; height: 50px; border-radius: 50%">
            </div>
        {% else %}
            <div class="login_block">
                <ul>
                    <li><a href="{% url 'tickets:login' %}">登录</a></li>
                    <li><a href="{% url 'tickets:login' %}">注册</a></li>
                </ul>
            </div>
        {% endif %}
    </div>

    <div class="nav" align="center">
        <ul>
            <li class="selected"><a href="{% url 'tickets:home' %}">首页</a></li>
            <li><a href="{% url 'tickets:guide' %}">出行指南</a></li>
            <li><a href="{% url 'tickets:personal_info' %}">个人信息</a></li>
            <!--<li><a href="{% url 'tickets:guide' %}">购票规则</a></li>-->
        </ul>
    </div>

    <form action="/tickets/query_inner" method="POST" id="innerform">
        {% csrf_token %}
        <div class="container--search">
            <span class="wayChoose">
                <label><input name="way" type="radio" class="" />单程 </label><br clear="none"/>
                <label><input name="way" type="radio" class="" />往返 </label>
            </span>
            <span class="whereChoose">
                <span class="select_box">
                    <font>&#8250;</font>
                    <span id="chooseStart">出发地</span>
                    <ul>
                        <li>北京</li>
                        <li>上海</li>
                        <li>广州</li>
                        <li>深圳</li>
                        <li>南宁</li>
                    </ul>
                </span>
                <span class="select_box">
                    <font>&#8250;</font>
                    <span id="chooseEnd">目的地</span>
                    <ul>
                        <li>南京</li>
                        <li>福州</li>
                        <li>东莞</li>
                        <li>汕头</li>
                        <li>南宁</li>
                    </ul>
                </span>
                <!-- <input type="text" placeholder="起点" class="box"> -->
                <!-- <input type="text" placeholder="终点" class="box"> -->
                <input type="date" placeholder="出发日" class="Datebox" id="chooseDate">

                <span class="select_box">
                    <font>&#8250;</font>
                    <span id="chooseOrder">排序方式</span>
                    <ul>
                        <li>日期</li>
                        <li>出发时间</li>
                        <li>到达时间</li>
                        <li>历时</li>
                    </ul>
                </span>

                <span class="container--button">
                    <button type="button" class="btn" id="btn_submit" onclick="queryBtn()">查询</button>
                </span>
            </span>
        </div>
    </form>
    <div class="container--table">
        <table  cellspacing="0" cellpadding="8px" class="tableBox" id="tScroll" align="center">
            <colgroup>
                <col width="70"/>
                <col width="140"/>
                <col width="100"/>
                <col width="120"/>
                <col width="120"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
            </colgroup>
            <thead>
                <tr>
                    <th colspan="1">车次</th>
                    <th colspan="1">日期</th>
                    <th colspan="1" >出发站<br/>到达站</th>
                    <th colspan="1">出发时间<br/>到站时间</th>
                    <th colspan="1">历时</th>
                    <th colspan="1">商务座</th>
                    <th colspan="1">一等座</th>
                    <th colspan="1">二等座</th>
                    <th colspan="1">高级软卧</th>
                    <th colspan="1">软卧</th>
                    <th colspan="1">动卧</th>
                    <th colspan="1">硬卧</th>
                    <th colspan="1">软座</th>
                    <th colspan="1">硬座</th>
                    <th colspan="1">无座</th>
                </tr>
            </thead>
        </table>
        
        <table cellspacing="0" cellpadding="8px" class="tableBox" id="tMain" align="center">
        <colgroup>
                <col width="70"/>
                <col width="140"/>
                <col width="100"/>
                <col width="120"/>
                <col width="120"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
                <col width="80"/>
            </colgroup>
            <thead>
                <tr>
                    <th colspan="1">车次</th>
                    <th colspan="1">日期</th>
                    <th colspan="1">出发站<br/>到达站</th>
                    <th colspan="1">出发时间<br/>到站时间</th>
                    <th colspan="1">历时</th>
                    <th colspan="1">商务座</th>
                    <th colspan="1">一等座</th>
                    <th colspan="1">二等座</th>
                    <th colspan="1">高级软卧</th>
                    <th colspan="1">软卧</th>
                    <th colspan="1">动卧</th>
                    <th colspan="1">硬卧</th>
                    <th colspan="1">软座</th>
                    <th colspan="1">硬座</th>
                    <th colspan="1">无座</th>
                </tr>
            </thead>
            <tbody>
                {% if tran_list %}
                    {% for tran_tuple in tran_list %}
                    <tr>
                        <td id="tran_Code{{ forloop.counter }}">
                            <font color="#473C8B">
                                {{ tran_tuple.tran_code }}
                            </font>
                        </td>
                        <td id="tran_Date{{ forloop.counter }}">
                            <font color="#262626">
                                {{ tran_tuple.tran_date }}
                            </font>
                        </td>
                        
                        <td>
                            <font color="#458B00">
                                始：{{ tran_tuple.station_start }}</br>
                            </font>
                            <font color="#EE0000">
                                终：{{ tran_tuple.station_arriv }}
                            </font>
                        </td>
                        <td>
                            <font color="#458B00">
                                发车：{{ tran_tuple.tran_strt }}</br>
                            </font>
                            <font color="#EE0000">
                                到站：{{ tran_tuple.tran_endt }}
                            </font>
                        </td>
                        <td>时长：{{ tran_tuple.tran_clip }}</td>

                        <td>{{ tran_tuple.seat_busine }}</td>
                        <td>{{ tran_tuple.seat_firstt }}</td>
                        <td>{{ tran_tuple.seat_second }}</td>
                        <td>{{ tran_tuple.seat_advsft }}</td>
                        <td>{{ tran_tuple.seat_sftslp }}</td>
                        <td>{{ tran_tuple.seat_bltslp }}</td>
                        <td>{{ tran_tuple.seat_hrdslp }}</td>
                        <td>{{ tran_tuple.seat_softer }}</td>
                        <td>{{ tran_tuple.seat_harder }}</td>
                        <td>{{ tran_tuple.seat_noleft }}</td>
                    </tr>
                    <tr id="hide_{{ forloop.counter }}" style="display: none;">
                        <td>--</td>
                        <td>--</td>
                        <td>--</td>
                        <td>--</td>
                        <td>--</td>
                        <td>
                            {% if tran_tuple.seat_busine > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td>
                            {% if tran_tuple.seat_firstt > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td>
                            {% if tran_tuple.seat_second > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td>
                            {% if tran_tuple.seat_advsft > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td>
                            {% if tran_tuple.seat_sftslp > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td>
                            {% if tran_tuple.seat_bltslp > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td>
                            {% if tran_tuple.seat_hrdslp > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td>
                            {% if tran_tuple.seat_softer > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td>
                            {% if tran_tuple.seat_harder > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td>
                            {% if tran_tuple.seat_noleft > 0 %}
                                <button type="button"
                                        style="width:50px;height:25px"
                                        onclick="reserveBtn()">预定</button>
                            {% else %}
                                --
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <script>
                        alert("抱歉，无当前车次信息")
                    </script>
                {% endif %}
            </tbody>
        </table>
    </div>

    <script>
        function setDetailMsgRow(rowID) {
            var row = document.getElementById(rowID);
            if (row != null) {
                if (row.style.display == (document.all ? "block" : "table-row")) {
                    row.style.display = "none";
                }
                else {
                    row.style.display = (document.all ? "block" : "table-row");
                }
            }
        }

        $(".container--table table").on("click", function (e) {
            $('#textOne').val($(e.target).text());
            var res = $(e.target).attr('id');
        });

        $(document).ready(function () {
            $('table tr').click(function () {
                var res = $(this).next().attr('id');
                setDetailMsgRow(res);
            });
        })
    </script>
</body>
<script src="{% static 'tickets/JS/myFunctions.js' %}"></script> 
</html>